<template>
  <el-tree
    :props="props"
    :load="loadNode"
    lazy
    show-checkbox
    @check-change="handleCheckChange"
  >
  </el-tree>
</template>

<script>
import {getAreaList} from '@/api/fields'
export default {
  name: "TreeFileds",
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
      },
      count: 1,
    };
  },
  created(){
    // this.getFiledList()
  },
  methods: {
    async getFiledList(query){
      let res = await getAreaList(query)
      console.log('-------------');
      console.log(res);
      return res.data
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },

    async loadNode(node, resolve) {
      const id = node.data && node.data.id 
      if (node.level === 0) {
        return resolve([{name: 'fileds',id:-1}]);
      }

      // 一级领域
      if (node.level === 1) {
        const firstFileds = await this.getFiledList()
        return resolve(firstFileds);
      }

      if (node.level === 2) {
        const query = {parentId: id}
        const seconedFields = await this.getFiledList(query)
        return resolve(seconedFields);
      }

      if (node.level === 3) {
         const query = {parentId: id}
        const thridFields = await this.getFiledList(query)
        return resolve(thridFields);
      }
      resolve([])
      // var hasChild;
      // if (node.data.name === "filed1") {
      //   hasChild = true;
      // }

      // var data;
      // if (hasChild) {
      //   data = [
      //     {
      //       name: "zone" + this.count++,
      //     },
      //     {
      //       name: "zone" + this.count++,
      //     },
      //   ];
      // } else {
      //   data = [];
      // }

      // resolve(data);
    },
  },
};
</script>

<style>
</style>